
<template>
    <el-form-item :label="label" :prop="prop" :rules="rules">
      <el-checkbox-group
        v-model="innerValue"
        v-bind="$attrs"
        :disabled="disabled"
        :size="size"
        :min="min"
        :max="max"
      >
        <template v-if="type === 'button'">
          <el-checkbox-button
            v-for="item in options"
            :key="item[valueKey]"
            :label="item[valueKey]"
            :disabled="item.disabled"
          >
            {{ item[labelKey] }}
          </el-checkbox-button>
        </template>
        <template v-else>
          <el-checkbox
            v-for="item in options"
            :key="item[valueKey]"
            :label="item[valueKey]"
            :disabled="item.disabled"
            :border="border"
            :indeterminate="item.indeterminate"
          >
            {{ item[labelKey] }}
          </el-checkbox>
        </template>
      </el-checkbox-group>
    </el-form-item>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  // 定义选项类型
  export interface CheckboxOption {
    [key: string]: any
    disabled?: boolean
    indeterminate?: boolean
  }
  
  // 定义组件属性
  interface Props {
    modelValue: (string | number | boolean)[]
    options: CheckboxOption[]
    prop?: string
    label?: string
    rules?: any[]
    disabled?: boolean
    size?: 'large' | 'default' | 'small'
    border?: boolean
    type?: 'default' | 'button'
    valueKey?: string
    labelKey?: string
    min?: number
    max?: number
  }
  
  // 设置默认值
  const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    options: () => [],
    prop: '',
    label: '',
    rules: () => [],
    disabled: false,
    size: 'default',
    border: false,
    type: 'default',
    valueKey: 'value',
    labelKey: 'label',
    min: undefined,
    max: undefined
  })
  
  // 定义事件
  const emit = defineEmits(['update:modelValue', 'change'])
  
  // 内部值双向绑定
  const innerValue = computed({
    get: () => props.modelValue,
    set: (val) => {
      emit('update:modelValue', val)
      emit('change', val)
    }
  })
  </script>  